<template>
    <!-- <el-date-picker
        v-model="startTime"
        type="date"
        placeholder="开始时间"
      />
       <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="结束时间"
      /> -->
 
        <el-row justify="end" style="margin-right:20px">
            <div class="block">
                <el-date-picker :clearable="true" v-model="startTime" type="daterange" range-separator="~" start-placeholder="开始时间"
                    end-placeholder="结束时间"  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
            </div>
        </el-row>
        <el-row id="main" style="height: 400px;background-color:#fff;margin-right: 20px;border-radius: 10px;">
             <div >
         
            </div>
        </el-row>
         <!-- <div class="demo-date-picker" style="display:inline-block;border-radius: 15px;">
            
        </div> -->
        
     
     
            
        
    
</template>

<script setup>
import { ElMessage } from 'element-plus'
import moment, { months } from 'moment'; 
import * as echarts from 'echarts'
import { onMounted, reactive, ref, watch } from '@vue/runtime-core'
import axios from 'axios';



let startTime=ref([]);
let echart = echarts;
let dateList=reactive([])
let dataListCount = reactive([]);


function getdata(){
axios.get('/api/reportForms/Nearly7Days',{
    params:{
        // start:startTime.value==null?null:moment(startTime.value).format("YYYY-MM-DD"),
        // end:endTime.value==null?null:moment(endTime.value).format("YYYY-MM-DD")
        start:startTime.value[0]==null?null:moment(startTime.value[0]).format("YYYY-MM-DD"),
        end:startTime.value[1]==null?null:moment(startTime.value[1]).format("YYYY-MM-DD")
    }
}).then((rs) => { 
    if(rs.data.data.length!=0){
        rs.data.data.forEach(element => {
        dataListCount.push(element.sum)
        dateList.push(moment(element.day).format("YYYY-MM-DD") )
        initChart();
    });   
    //数据初始化完成之后清空数组，每一次请求数据时将会重新渲染数组
    dateList=[];
    dataListCount=[];
    }else{
        ElMessage.warning("没有这段时间的数据");
    }
   
})
}

watch(startTime,(newTime,oldTime)=>{
    if(newTime==null){
        startTime.value=[]
                
    }
        getdata();
})
onMounted(() => {
    getdata()
});

function initChart() {
    let chart= echarts.getInstanceByDom(document.getElementById('main')); //有的话就获取已有echarts实例的DOM节点。
    // 如果不存在，就进行初始化。
    if (chart== null) { 
    	chart=echarts.init(document.getElementById('main'));
    }
    chart.setOption({

        color: ['#FFBF00'],
        title: {
            text: '用户注册量'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: dateList
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        
        series: [
            {
                name: '注册量',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(128, 255, 165)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(1, 191, 236)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: dataListCount
            }
        ]
    });
    window.onresize = function () {
        //自适应大小
        chart.resize();
    };
}

</script>

<style>
</style>